<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Permission, PermissionParams } from '@/api/acl/permission/type.ts'
import {
  reqPermissionAddOrUpdate,
  reqPermissionDelete,
  reqPermissionList,
} from '@/api/acl/permission'
import { OPERATION_TYPE } from '@/api/type.ts'

const permissionList = ref<Permission[]>()

const dialogVisible = ref<boolean>(false)
const operate = ref<OPERATION_TYPE>(OPERATION_TYPE.ADD)

const permissionParams = reactive<PermissionParams>({
  pid: 0,
  name: '',
  code: '',
  level: 0,
})
const getPermissionList = async () => {
  try {
    const { code, data, message } = await reqPermissionList()
    if (code == 200) {
      permissionList.value = data
    } else {
      ElMessage.error(message)
    }
  } catch (e: any) {
    ElMessage.error(e?.message)
  }
}

const onAddMenu = (row: Permission) => {
  operate.value = OPERATION_TYPE.ADD
  Object.assign(permissionParams, {
    pid: row?.id,
    name: '',
    code: '',
    level: row?.level + 1,
  })
  dialogVisible.value = true
}

const onEditMenu = (row: Permission) => {
  operate.value = OPERATION_TYPE.UPDATE
  Object.assign(permissionParams, row)
  dialogVisible.value = true
}

const onDeleteMenu = async (row: Permission) => {
  try {
    const { code, message } = await reqPermissionDelete(row?.id as number)
    if (code == 200) {
      ElMessage.success('删除成功')
      await getPermissionList()
    } else {
      ElMessage.error(message)
    }
  } catch (e: any) {
    ElMessage.error(e?.message)
  }
}

const onDialogConfirm = async () => {
  try {
    const { code, message } = await reqPermissionAddOrUpdate(permissionParams)
    if (code == 200) {
      ElMessage.success(
        operate.value == OPERATION_TYPE.ADD ? '添加成功' : '修改成功',
      )
      dialogVisible.value = false
      await getPermissionList()
    } else {
      ElMessage.error(message)
    }
  } catch (e: any) {
    ElMessage.error(e?.message)
  }
}

const dialogTitle = computed(() => {
  let prefix = operate.value == OPERATION_TYPE.ADD ? '添加' : '编辑'
  let suffix = permissionParams.level < 4 ? '菜单' : '功能'
  return prefix + suffix
})

onMounted(() => {
  getPermissionList()
})
</script>

<template>
  <div>
    <el-card>
      <el-table :data="permissionList" row-key="id" border>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="code" label="权限值"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              icon="plus"
              :disabled="row?.level == 4"
              @click="onAddMenu(row)"
            >
              {{ row?.level < 3 ? '添加菜单' : '添加功能' }}
            </el-button>
            <el-button
              type="primary"
              size="small"
              icon="edit"
              :disabled="row?.level == 1"
              @click="onEditMenu(row)"
            >
              编辑
            </el-button>
            <el-popconfirm
              :title="`确认删除：${row?.name}？`"
              @confirm="onDeleteMenu(row)"
              confirm-button-text="确认"
              cancel-button-text="取消"
              width="200"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="delete"
                  :disabled="row?.level == 1"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible">
      <template #header>
        <h4>{{ dialogTitle }}</h4>
      </template>
      <template #default>
        <el-form label-width="80">
          <el-form-item label="名称">
            <el-input
              v-model="permissionParams.name"
              placeholder="请输入菜单名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限值">
            <el-input
              v-model="permissionParams.code"
              placeholder="请输入菜单权限值"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="onDialogConfirm">确认</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
